//        ___       ___          ___       ___                      ___          ___
//       /  /\     /  /\        /  /\     /  /\         ___        /  /\        /  /\
//      /  /::\   /  /::\      /  /::\   /  /::\       /__/\      /  /:/_      /  /::\
//     /  /:/\:\ /  /:/\:\    /  /:/\:\ /  /:/\:\      \  \:\    /  /:/ /\    /  /:/\:\
//    /  /:/~/://  /:/  \:\  /  /:/~/://  /:/  \:\      \  \:\  /  /:/ /:/_  /  /:/~/:/
//   /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___  \__\:\/__/:/ /:/ /\/__/:/ /:/___
//   \  \:\/:/ \  \:\ /  /:/\  \:\/:/ \  \:\ /  /://__/\ |  |:|\  \:\/:/ /:/\  \:\/:::::/
//    \  \::/   \  \:\  /:/  \  \::/   \  \:\  /:/ \  \:\|  |:| \  \::/ /:/  \  \::/~~~~
//     \  \:\    \  \:\/:/    \  \:\    \  \:\/:/   \  \:\__|:|  \  \:\/:/    \  \:\
//      \  \:\    \  \::/      \  \:\    \  \::/     \__\::::/    \  \::/      \  \:\
//       \__\/     \__\/        \__\/     \__\/          ~~~~      \__\/        \__\/
//



//*
// The popover for the footnote. This popover will be, by default, be sized and positioned
// by the script. However, many of the sizes can be established in this stylesheet and
// will be respected by the script. `max-width` will limit the width of the popover
// relative to the viewport. `width` (on `bigfoot-footnote__wrapper`) will set the
// absolute max width. Max height can be set via a `max-height` property
// on `bigfoot-footnote__content`.

// By default, the popover has a light gray background, a shadow for some depth,
// rounded corners, and a tooltip pointing to the footnote button.

// @state .is-active            - The popover has been activated and is visible.
// @state .is-positioned-top    - The popover is above the button.
// @state .is-positioned-bottom - The popover is below the button.
// @state .is-scrollable        - The popover content is greater than the popover height.
// @state .is-fully-scrolled    - The popover content is scrolled to the bottom.

// @since 2.1.0
// @author Chris Sauve

.bigfoot-footnote {
  // POSITIONING
  position: absolute;
  z-index: $popover-z-index;
  top: 0; left: 0;

  // DISPLAY AND SIZING
  display: inline-block;
  box-sizing: border-box;
  // Height is set in .footnote-content-wrapper
  max-width: $popover-max-width;
  // 1.414213... is to get the diagonal height of the tooltip using pythagorus, yo.
  margin: ((1.4142135624 * $popover-tooltip-size / 2) + $button-height + $popover-margin-top) 0;
  // fits the popover to the contents

  // BACKDROP
  background: $popover-color-background;
  opacity: $popover-inactive-opacity;
  border-radius: $popover-border-radius;
  border: $popover-border;
  box-shadow: $popover-box-shadow;

  // TEXT
  line-height: 0;

  // TRANSITIONS
  transition-property: $popover-transition-properties;
  transition-duration: $popover-transition-default-duration;
  transition-timing-function: $popover-transition-default-timing-function;

  // TRANSFORMS
  transform: $popover-initial-transform-state;
  transform-origin: $popover-initial-transform-origin;

  &.is-positioned-top {
    top: auto;
    bottom: 0;
  }

  &.is-active {
    transform: $popover-active-transform-state;
    opacity: $popover-active-opacity;
  }

  &.is-bottom-fixed {
    // POSITIONING
    position: fixed;
    bottom: 0; top: auto;
    left: 0; right: auto;
    transform: translateY(100%);

    // DISPLAY AND SIZING
    width: 100%;
    margin: 0;

    // BACKDROP
    border-radius: 0;
    opacity: 1;
    border-width: 1px 0 0;

    // TRANSITIONS
    transition: transform 0.3s ease;

    &.is-active {
      transform: translateY(0);
    }

    .bigfoot-footnote__wrapper {
      margin: 0 0 0 50%;
      transform: translateX(-50%);
      max-width: 100%;
    }

    .bigfoot-footnote__wrapper,
    .bigfoot-footnote__content {
      border-radius: 0;
    }

    .bigfoot-footnote__tooltip {
      display: none;
    }
  }

  &.is-scrollable {
    // A scrollable indicator in the left margin of the popover.
    &:after {
      // CONTENT
      content: '';

      // POSITIONING
      position: absolute;
      bottom: $popover-scroll-indicator-padding;
      left: $popover-scroll-indicator-padding;
      z-index: ($popover-z-index + 4);

      // DISPLAY AND SIZING
      display: block;
      height: ($popover-scroll-indicator-width*$popover-scroll-indicator-aspect-ratio);
      width: $popover-scroll-indicator-width;

      // BACKDROP
      background-image: $popover-scroll-indicator-icon;
      background-size: cover;
      opacity: $popover-scroll-indicator-opacity;
      transition-properties: $popover-scroll-indicator-transition-properties;
      transition-duration: $popover-transition-default-duration;
      transition-timing-function: $popover-transition-default-timing-function;
    }

    .bigfoot-footnote__wrapper {
      &:before,
      &:after {
        content: '';
        position: absolute;
        width: 100%;
        // Above the content
        z-index: ($popover-z-index + 2);
        left: 0;
      }

      &:before {
        top: -1px;
        height: $popover-padding-content-top;
        border-radius: $popover-border-radius $popover-border-radius 0 0;
        background-image: linear-gradient(to bottom, $popover-color-background $popover-scrolly-fade-gradient-start-location, transparentize($popover-color-background, 1) 100%);
      }

      &:after {
        bottom: -1px;
        height: $popover-padding-content-bottom;
        border-radius: 0 0 $popover-border-radius $popover-border-radius;
        background-image: linear-gradient(to top, $popover-color-background $popover-scrolly-fade-gradient-start-location, transparentize($popover-color-background, 1) 100%);
      }
    }

    ::-webkit-scrollbar { display: none; }
  }

  &.is-fully-scrolled {
    &:after,
    &:before {
      opacity: 0;
      transition-delay: 0;
    }
  }
}



//*
// Wraps around the footnote content. This is necessary in order to have an element
// above the tooltip and that can provide top and bottom indicators that there is
// additional content on scrollable popovers.

// @since 2.1.0
// @author Chris Sauve

.bigfoot-footnote__wrapper {
  // POSITIONING
  position: relative;
  // Above the outer tooltip, below the inner tooltip
  z-index: ($popover-z-index + 4);

  // DISPLAY AND SIZING
  width: $popover-width;
  display: inline-block;
  box-sizing: inherit;
  overflow: hidden;
  margin: 0;

  // BACKDROP
  background-color: $popover-color-background;
  border-radius: $popover-border-radius;

  // TEXT
  line-height: 0;
}



//*
// Contains the actual footnote content. There is very little prescription here
// on the footnote content itself, except for removing and top margin on the first
// element and bottom margin on the last child.

// @since 2.1.0
// @author Chris Sauve

.bigfoot-footnote__content {
  // POSITIONING
  position: relative;
  z-index: ($popover-z-index - 2); // Below fading bars

  // DISPLAY AND SIZING
  display: inline-block;
  max-height: $popover-max-height;
  padding: $popover-padding-content-top $popover-padding-content-horizontal $popover-padding-content-bottom;
  box-sizing: inherit;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  // BACKDROP
  background: $popover-content-color-background;
  border-radius: $popover-content-border-radius;

  // TEXT
  -webkit-font-smoothing: subpixel-antialiased;
  line-height: normal;

  // INTERIOR ELEMENTS
  img { max-width: 100%; }
  *:last-child { margin-bottom: 0 !important; }
  *:first-child { margin-top: 0 !important; }
}



//*
// A triangular shape pointing towards the footnote button.

// @since 2.1.0
// @author Chris Sauve

.bigfoot-footnote__tooltip {
  // POSITIONING
  position: absolute;
  // Above the footnote-main-wrapper and the outer tooltip
  z-index: ($popover-z-index + 2);

  // DISPLAY AND SIZING
  box-sizing: border-box;
  margin-left: (-0.5 * $popover-tooltip-size);
  // Smaller by one border-width's worth
  width: $popover-tooltip-size;
  height: $popover-tooltip-size;
  transform: rotate(45deg);

  // BACKDROP
  background: $popover-tooltip-background;
  border: $popover-border;
  box-shadow: $popover-box-shadow;
  border-top-left-radius: $popover-tooltip-radius;

  .is-positioned-bottom & {
    top: (-0.5 * $popover-tooltip-size);
  }

  .is-positioned-top & {
    bottom: (-0.5 * $popover-tooltip-size);
  }
}
